<template>
  <el-container>
    <el-header>
      <el-row>
        <el-button type="primary" round size="mini" @click="toAdd">新增学院</el-button>
      </el-row>
    </el-header>
    <el-table :data="tableData" stripe    height="250"
              border
              style="width: 100%">
      <el-table-column prop="academyId" label="学院ID" width="80px"></el-table-column>
      <el-table-column prop="academyName" label="学院名称"></el-table-column>
      <el-table-column prop="createBy" label="创建人"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="toModify(scope.$index)">编辑</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="del(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-footer>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page.current"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="page.size"
          layout="sizes, prev, pager, next"
          :total="page.total">
      </el-pagination>
    </el-footer>
    <el-dialog :title="component.title" :modal-append-to-body='false' :visible.sync="component.visible">
      <el-form :model="component">
        <el-form-item label="学院ID" label-width="auto">
          <el-input v-model="component.obj.academyId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学院名称" label-width="auto" required>
          <el-input v-model="component.obj.academyName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="component.visible = false">取 消</el-button>
        <el-button type="primary" @click="doOperation">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>

</template>
<script>

import {getAcademyList, delAcademy, addAcademy,modifyAcademy} from "@/api/api";

export default {
  data() {
    return {
      component:{
        visible: false,
        obj:{
          academyId: "",
          academyName: "",
        },
        title:"",
        operation:0
      },
      page:{
        current:1,
        size:5,
      },
      tableData: [],
    }
  },
  created() {
    this.refreshData()

  },
  methods: {
    refreshData(){
      getAcademyList(this.page).then((data)=>{
        this.tableData = data.data.data.records
        this.page.size = data.data.data.size
        this.page.total = data.data.data.total
        this.page.current = data.data.data.current
      })
    },
    handleSizeChange(val) {
      this.page.size = val
      this.refreshData()
    },
    handleCurrentChange(val) {
      this.page.current = val
      this.refreshData()
    },
    toAdd(){
      this.component.title= "新增"
      this.component.visible = true
      this.component.operation = 0
      this.component.obj.academyId = ""
      this.component.obj.academyName = ""
    },
    toModify(index){
      this.component.obj = Object.assign({},this.tableData[index])
      this.component.title= "编辑"
      this.component.visible = true
      this.component.operation = 1
    },
    del(index){
      let delObj = this.tableData[index]
      delAcademy(delObj).then(()=>{
      }).catch((data)=>{
        alert(data.response.data.msg)
      }).finally(()=>{this.refreshData()})

    },
    async doOperation() {
      let signal = this.component.operation;
      let obj = this.component.obj
      switch (signal) {
        case 0:
          await addAcademy(obj).then(() => {
            this.component.visible = false
          }).catch((data) => {
            alert(data.response.data.msg)
          })
          break;
        case 1:
          await modifyAcademy(obj).then(() => {
            this.component.visible = false
          }).catch((data) => {
            alert(data.response.data.msg)
          })
          break;
      }
      this.refreshData()
    }
  }
}
</script>

<style scoped>
.el-header {
  background-color: #fff;
}
</style>
